import React, { Component } from 'react'
import { Table, Space, Form, Input } from "antd"
import axios from "axios"
import { Button, Modal } from 'antd';
// 前端开发70%都是pc,百分之10%h5,百分之10小程序

class Dh1 extends Component {
  state = {
    bianji: "新增",
    isModalVisible: false, // 控制删除弹窗得显示隐藏
    isModalVisible1: false, // 用于新增或者编辑得弹框得显示与隐藏
    arr: [],
    editIndex:0, // 编辑哪一条的下标
    delIndex: 0, // 用于记录删除哪一条的下标
    columns: [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '年龄',
        dataIndex: 'date',
        key: 'date',
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
      },
      {
        title: 'Action',
        key: 'action',
        render: (_, record, index) => ( // record是当前行得数据，index是当前行得下标
          <Space size="middle">
            <a onClick={this.editfn.bind(this, record, index)}>编辑</a>
            <a onClick={this.delfn.bind(this, index)}>删除</a>
          </Space>
        ),
      },
    ]

  }
  editfn(record, index) { // 编辑得函数
    console.log(record, index);
    this.setState({
      isModalVisible1: true,
      bianji: "编辑",
      editIndex:index
    })
    this.myref.setFieldsValue(record) // 设置表单的初始值，我们将表单的初始值设置为当前行得数据
  }
  delfn(index) { // 删除的函数
    this.setState({
      delIndex: index,
      isModalVisible: true
    })
  }
  handleOk() {
    let arr = [...this.state.arr]
    arr.splice(this.state.delIndex, 1)
    this.setState({
      arr,
      isModalVisible: false
    })
  }
  handleCancel() {
    this.setState({
      isModalVisible: false
    })
  }
  componentDidMount() {
    axios.get("/list").then(res => {
      console.log(res.data, 111);
      this.setState({
        arr: res.data
      })
    })
  }
  onFinish(e) { // 表单成功提交的方法
    if (this.state.bianji == "新增") {
      e.key = new Date()
      let arr = [...this.state.arr] // 不影响原来初始化定义得数据
      arr.push(e)
      this.setState({
        arr
      })
      setTimeout(() => {
        this.setState({
          isModalVisible1: false
        })
      }, 100)
    } else {   // 得知道是数组里的第几项吧，改变这一项，把改变之后的数组赋值给this.state.arr
      let arr = [...this.state.arr]
      arr[this.state.editIndex] = e
      arr[this.state.editIndex].key= Math.random()
      console.log(arr,123456);
      this.setState({
        arr
      })
      setTimeout(() => {
        this.setState({
          isModalVisible1: false
        })
      }, 100)
    }

  }
  handleCancel1() {
    this.setState({
      isModalVisible1: false
    })
  }
  addfn() { // 点击新增得事件
    this.setState({
      isModalVisible1: true,
      bianji: "新增"
    })
    this.myref.resetFields() // 让表单的值清空
  }
  render() {
    return (
      <div>
        {/* dattaSource是数据源 */}
        <Button onClick={this.addfn.bind(this)}>新增</Button>
        <Table dataSource={this.state.arr} columns={this.state.columns} />;
        <Modal title="删除" visible={this.state.isModalVisible} onOk={this.handleOk.bind(this)} onCancel={this.handleCancel.bind(this)}>
          <p>您确定要删除吗？</p>
        </Modal>
        {/* 用于新增跟编辑得弹框 */}
        <Modal title={this.state.bianji} forceRender visible={this.state.isModalVisible1} onCancel={this.handleCancel1.bind(this)} footer={null}>
          <Form
            name="basic"
            labelCol={{
              span: 8,
            }}
            ref={(ref) => { return this.myref = ref }}
            wrapperCol={{
              span: 16,
            }}
            initialValues={{
              remember: true,
            }}
            onFinish={this.onFinish.bind(this)}
            autoComplete="off"
          >
            <Form.Item
              label="姓名"
              name="name"
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="日期"
              name="date"
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="住址"
              name="address"
            >
              <Input />
            </Form.Item>
            <Form.Item
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Button type="primary" htmlType="submit">
                Submit
              </Button>
            </Form.Item>
          </Form>
        </Modal>
      </div>
    )
  }
}

export default Dh1